<template>
    <div class="Popular_bloggers bgwhite mb15">
        <div class="HomeTit HomeTit_border">
            <div class="tit">热门博主</div>
            <router-link v-if="showMore" to="/BloggerList" tag="a" class="more">更多</router-link>
        </div>
        <div class="Popular_bloggersBox">
            <ul>
                <li v-for="(item, index) in currentList" :key="index">
                    <div @click="goToTargetPage('/otherInfo?uid='+item.uid, item.uid)" class="img">
                        <div class="imgbox">
                            <span><img src="../assets/uploadfiles/image/logo.png" alt=""></span>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="tit dot pointer" @click="goToTargetPage('/otherInfo?uid='+item.uid, item.uid)"><a>{{item.username}}</a></div>
                        <div class="dec dot">作品 {{formatCommentCount(item.postNum)}} / 粉丝 {{formatCommentCount(item.fans)}}</div>
                        <div class="gzbtn" v-if="item.uid !== userInfoCommon.uid" @click="followUser(item)">{{item.isFollow ? '取消关注' : '+ 关注'}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>


<script setup name="Header">
import { userApi } from '@/api';
import { computed, ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElNotification } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/Common';
import { commonMethods } from '@/utils/common';
const emit = defineEmits(['updateUserInfo']);

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// props
const props = defineProps({
    // 是否显示更多按钮
    showMore: {
        type: Boolean,
        default: true
    }
})

// 路由
const router = useRouter();
const goToTargetPage = (path, uid) => {
    // 如果是自己的信息，跳转到用户信息页面，否则跳转到其他用户信息页面
    if(uid === userInfoCommon.value.uid) {
        router.push('/userInfo');
    }else{
        router.push(path);
    };
}

// 公共store
const commonStore = useCommonStore();
const {userInfoCommon} = storeToRefs(commonStore);

// 页面数据
const currentList = ref([]);

// 生命周期
onBeforeMount(() => {
    getHotBlogger();                                         
})

/**
 * @name 博主列表
 */
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    keyword: '',
    timeRange: 6
})
const getHotBlogger = () => {
    userApi.getHotBlogger(queryParams).then((res) => {
        let {list} = res.result;
        list.filter((item) => {
            item.fans = parseInt(item.fans);
        })
        currentList.value = list;
    }).catch(err => {});
}

// 关注用户
const followUser = (item) => {
    if(item.isFollow) {
        // 取消关注
        userApi.followCancel({id: item.uid}).then((res) => {
            item.isFollow = false;
            // 更新父组件方法
            emit('updateUserInfo');
            ElNotification({
                title: '提示',
                message: '已取消关注',
                type: 'success',
            })
            item.fans-=1;
        }).catch(err => {});
    }else{
        // 关注用户
        userApi.followAdd({id: item.uid}).then((res) => {
            item.isFollow = true;
            // 更新父组件方法
            emit('updateUserInfo');
            ElNotification({
                title: '提示',
                message: '已关注',
                type: 'success',
            })
            item.fans+=1;
        }).catch(err => {});
    }
    
}

// 暴露给父组件的方法和属性
defineExpose({
    getHotBlogger,
})

</script>


<style lang="less" scoped></style>